<template>
	<view class="vip">
		<view class="vip-top">
			<image src="/static/images/vip-bei.png" mode=""></image>
			<view class="vip-hg">
				<image src="../../static/images/icon-h.png" mode=""></image>
			</view>
		</view>
		<view class="vip-center">
			<image src="/static/images/max-bj.png" mode=""></image>
			<view class="vip-center-flex" >
				<view class="vip-center-li" v-for="(item,index) in grid">
					<image :src="'/static/images/' + item.img + '.png' " mode=""></image>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="vip-bottom">
			<view class="vip-bottom-top">
				<image src="../../static/images/icon-vip.png" mode=""></image>
				<text>购买VIP会员</text>
			</view>
			<view class="vip-bottom-center" v-for="(item,index) in vip">
				<image :src=" '../../static/images/' + item.img + '.png' " mode=""></image>
				<text class="year">{{item.msg}}</text>
				<text class="rmb">{{item.money}}</text>
			</view>
		</view>
		<view class="vip-purchase">
			<!-- <text>购买VIP权益</text> -->
			<button type="primary" @click="toggle('bottom')" style="background-color: #DEAF6F;">购买VIP权益</button>
			<uni-popup ref="popup" :type="type" :animation="false" :maskClick="true">
				<view class="zhifu" style="background-color:#FFFFFF;">
					<text>请选择支付方式</text>
				</view>

				<view class="weix">
					<image src="../../static/images/weix.png" mode=""></image>
					<text>微信支付</text>
				</view>
				<view class="weix">
					<image src="../../static/images/zhifb.png" mode=""></image>
					<text>支付宝（支持花呗）</text>
				</view>
				<view class="quxiao">
					<text @tap="close">取消支付</text>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'top',
				grid: [
					{
					img: 'icon-4',
					title:'全网搜索'
				    }, 
					{
					img: 'icon-5',
					title:'精准搜索'
					}, 
					{
					img: 'icon-3',
					title:'短信群发'
					}, 
					{
					img: 'icon-6',
					title:'同城商桥'
					}, 
					{
					img: 'icon-2',
					title:'公司咨询'
					}, 
					{
					img: 'icon-a',
					title:'品牌推广'
					}, 
				],
				vip:[
					{
						img:'max-b',
						msg:'个人版一年',
						money:'￥1580.00'
					},{
						img:'max-b',
						msg:'个人版两年',
						money:'￥2580.00'
					},{
						img:'max-b',
						msg:'个人版永久',
						money:'￥5580.00'
					},
				]
			};
		},
		methods: {
			toggle(type) {
				this.type = type; // 从下面弹出来 如果删除则从上面弹出
				this.$refs['popup'].open();
			},
			//关闭弹窗
			close(){
				this.$refs.popup.close()
			}
		}
	};
</script>

<style>
	.vip-top image {
		width: 750rpx;
		height: 300rpx;
	}

	.vip-hg image {
		width: 591rpx;
		height: 166rpx;
		position: absolute;
		top: 25rpx;
		left: 86rpx;
	}

	.vip-center {
		width: 671rpx;
		height: 388rpx;
		position: absolute;
		top: 216rpx;
		left: 40rpx;
	}

	.vip-center image {
		width: 671rpx;
		height: 388rpx;
	}

	.vip-center-flex {
		width: 671rpx;
		height: 388rpx;
		position: absolute;
		margin-top: -400rpx;
	}

	.vip-center-li {
		width: 33%;
		height: 122rpx;
		padding-top: 50rpx;
		float: left;
		text-align: center;
	}

	.vip-center-li image {
		width: 76rpx;
		height: 76rpx;
		display: block;
		margin: 0 auto;
	}

	.vip-center-li text {
		width: 117rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		line-height: 55rpx;
	}

	.vip-bottom {
		width: 750rpx;
		height: 500rpx;
		padding-top: 310rpx;
	}

	.vip-bottom {
		padding-left: 44rpx;
	}

	.vip-bottom-top image {
		width: 42rpx;
		height: 33rpx;
	}

	.vip-bottom-top text {
		width: 196rpx;
		height: 34rpx;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #201C1B;
		line-height: 55rpx;
		padding-left: 33rpx;
	}

	.vip-bottom-center {
		margin-top: 25rpx;
	}

	.vip-bottom-center image {
		width: 671rpx;
		height: 97rpx;
		display: block;
	}

	.year {
		height: 29rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #201C1B;
		line-height: 55rpx;
		float: left;
		position: absolute;
		margin-top: -80rpx;
		margin-left: 88rpx;
	}

	.rmb {
		width: 127rpx;
		height: 24rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #F6BA3E;
		line-height: 55rpx;
		position: absolute;
		margin-top: -80rpx;
		margin-left: 450rpx;
	}

	.vip-purchase {
		width: 669rpx;
		height: 99rpx;
		/* background: #DEAF6F; */
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: -50rpx;
	}

	.vip-purchase text {
		width: 198rpx;
		height: 35rpx;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: block;
		margin: 0 auto;
		line-height: 80rpx;
	}

	.zhifu {
		height: 94rpx;
		text-align: center;
	}

	.zhifu text {
		width: auto;
		height: 29rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}
     .weix{
		 background-color:#FFFFFF;padding: 15rpx;
	 }
	.weix image {
		width: 49rpx;
		height: 43rpx;
		margin-left: 50rpx;
	}

	.weix text {
		width: auto;
		height: 29rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		position: absolute;
		margin-left: 130rpx;
		margin-top: -70rpx;
	}

	.quxiao {
		margin-top: 20rpx;
		padding:30rpx; background-color:#FFFFFF;
	}

	.quxiao text {
		width: 119rpx;
		height: 29rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
	}

	.vip-xian {
		width: 680rpx;
		height: 2rpx;
		background: #DD524D;
		margin: 0 auto;
	}
</style>
